<template>
  <div class="post-card">
    <div class="post-image" v-if="post.image">
      <img :src="post.image" :alt="post.title">
    </div>
    <div class="post-content">
      <div class="post-meta">
        <span class="post-date" v-text="formatDate(post.date)"></span>
        <span class="post-category" v-text="post.category"></span>
      </div>
      <h3 class="post-title">
        <router-link :to="`/post/${post.id}`" v-text="post.title"></router-link>
      </h3>
      <p class="post-excerpt" v-text="post.excerpt"></p>
      <div class="post-tags">
        <span 
          v-for="tag in post.tags" 
          :key="tag" 
          class="tag"
          v-text="tag"
        >
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PostCard',
  props: {
    post: {
      type: Object,
      required: true
    }
  },
  methods: {
    formatDate(dateString) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(dateString).toLocaleDateString('zh-CN', options)
    }
  }
}
</script>

<style scoped>
.post-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.post-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-content {
  padding: 1.5rem;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.post-date {
  font-size: 0.9rem;
  color: #666;
}

.post-category {
  background: linear-gradient(to right, #e8f4f8, #d1e7f0);
  color: #667eea;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.post-title {
  margin: 0 0 1rem 0;
}

.post-title a {
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  font-weight: 600;
  transition: color 0.3s;
  position: relative;
}

.post-title a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.post-title a:hover {
  color: #667eea;
}

.post-title a:hover::after {
  width: 100%;
}

.post-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: linear-gradient(to right, #f0f2f5, #e1e5ea);
  color: #555;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>